<template>
  <!-- 添加/编辑 属性类型 -->
  <div class="edit-type">
    <el-dialog :model-value="dialogTypeVisible" width="30%" :title="id === 0 ? '添加类型' : '编辑类型'" @close="cancelFn">
      <!-- 搜索框 -->
      <div class="search">
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
          <el-form-item label="类型名称" prop="typeInput">
            <el-input v-model="form.typeInput" placeholder="请输入类型名称" size='default' />
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部  取消  确定 按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';



const props = withDefaults(defineProps<{
  dialogTypeVisible: boolean;
  id: number;
  name: string;
}>(), {
  dialogTypeVisible: false,
  id: 0,
  name: ''
});

const emits = defineEmits<{
  (e: 'cancel'): void;
  (e: 'confirm'): void;
}>();

// form表单的数据
const form = reactive({
  typeInput: ''
})

const ruleFormRef = ref<FormInstance>();

// 表单校验规则
const rules = reactive({
  typeInput: [{ required: true, message: '请输入类型名称!', trigger: 'blur' }]
});

// 点击  取消/关闭 窗口
const cancelFn = () => {
  // 触发 自定义事件 cancel
  emits('cancel');
  // 清空输入框
  form.typeInput = '';
};


// 添加 商品属性分类 请求方法
const addAttributeCategory = () => {
  http.attribute.addAttributeCategory(form.typeInput).then(res => {
    if (res.code === 200) {
      // 告诉 父组件 关闭窗口
      emits('confirm');
      // 提示用户 添加成功
      ElMessage.success('添加成功');
    }
  })
};

// 编辑  商品属性分类 请求方法
const updateAttributeCategory = (id: number) => {
  // 需要 传两个参数  1. 当前编辑的属性分类的id  2. 编辑后的类型名称 name
  http.attribute.updateAttributeCategory(id, form.typeInput).then(res => {
    if (res.code === 200) {
      // 告诉 父组件 关闭窗口
      emits('confirm');
      // 提示用户 编辑成功
      ElMessage.success('编辑成功');
    }
  })
};

// 点击 编辑/新增窗口的 "确定按钮"
const confirmFn = () => {
  // 提交表单  进行表单校验
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      // console.log('submit!...表单验证通过!');
      // 判断当前是 新增(0) 还是 编辑(!=0)
      if (props.id === 0) {
        // 发送请求 添加  商品属性分类
        addAttributeCategory();
      } else {

        // 调用 编辑  商品属性分类 的方法 (需要传一个当前编辑的id)
        updateAttributeCategory(props.id);
      }
    } else {
      // console.log('error submit!....表单验证失败!');
      ElMessage.error('请先填写类型名称');
      return false
    }
  })
};

// 监听 父组件传过来的id
watch(
  () => props.id,
  (val) => {
    console.log('监听到父组件传过来的id变化 :', val);
    if (val !== 0) {
      // 表示当前是编辑
      form.typeInput = props.name;
    }
  }
)

</script>

<style scoped lang="less">
// .edit-type {
// }
</style>